HW4

Wizualizacja oryginalna znajduje się pod linkiem : https://arstechnica.com/gaming/2020/04/ars-analysis-80-of-steam-games-earn-under-5k-in-first-two-weeks/

Źródło danych

Niestety na stronie z wykresem do poprawy nie jest wskazane źródło danych. Więc samodzielnie stworzyłam plik z danymi na podstawie wykresu

Co trzeba naprawić?

  • Na tym wykresie jest bardzo trudno odczytać wartości, którym odpowiadają części kolumn każdego koloru, bo są to wartości z bardzo dużego zakresu (od 0 do 8000).
  • Liczby gier w rokach 2007 - 2011 są bardzo małe (w porównaniu z kolumnami późnejszych lat),więc ich prawie nie jest widać.
  • Według mnie kolory są dobrane w bardzo z ły sposób. Bo kolory odpowiadają wartości ilościowej, więc mi się wydaje że warto użyć kolorów od jasnego do ciemnego(od mniejszego do największego).
  • Poprawianie

    In [1]:
    import numpy as np
    import pandas as pd
    from plotly.subplots import make_subplots
    from plotly import tools
    import plotly.graph_objs as go
    from plotly.offline import iplot
    
    games_data = pd.read_csv("data_games.csv")
    games_data
    
    Out[1]:
    Year Earnings NumberOfGames
    0 2007 $<5K 40
    1 2007 $5K-10K 20
    2 2007 $10K-50K 24
    3 2007 $50K-100K 15
    4 2007 $100K-250K 0
    ... ... ... ...
    73 2019 $5K-10K 300
    74 2019 $10K-50K 600
    75 2019 $50K-100K 150
    76 2019 $100K-250K 100
    77 2019 $>250K 220

    78 rows × 3 columns

    In [2]:
    from plotly.subplots import make_subplots
    import plotly.graph_objects as go
    
    earnings_data_dict = {}
    colors = ['#f5deb3', '#FFD700', 'orange', '#FF5F1F', '#DC143C', '#4A0404']
    
    fig = go.Figure()
    
    for earnings in games_data['Earnings'].unique():
        earnings_data = games_data[games_data['Earnings'] == earnings]
        earnings_data_dict[earnings] = earnings_data
    
    buttons = []
    for earnings, data in earnings_data_dict.items():
        buttons.append(
            dict(
                label=str(earnings),
                method='update',
                args=[{'visible': [earnings == e for e in earnings_data_dict.keys()]}],
            )
        )
    
    buttons.append(
        dict(
            label="All",
            method="update",
            args=[{'visible': [True] * len(earnings_data_dict)}],  
        )
    )
    
    
    for earnings, data in earnings_data_dict.items():
        fig.add_trace(go.Bar(
            x=data['Year'],
            y=data['NumberOfGames'],
            name=earnings,
            marker_color=colors[len(fig.data) % len(colors)],
            marker_line_color='black', 
            marker_line_width=1,
            visible=False))
        fig.data[len(fig.data) - 1].visible = True
    
        
    fig.update_layout(
        title="Sales of steam games in first two weeks after launch",
        xaxis=dict(title='Year', dtick=1),
        yaxis=dict(title='Number of games'),
        barmode='stack',
        height=700,
        bargroupgap=0,
        plot_bgcolor='rgba(0,0,0,0)', 
        xaxis_showgrid=True, 
        yaxis_showgrid=True, 
        yaxis_gridcolor='lightgrey',
        updatemenus=[
            dict(
                type="buttons",
                direction="down",
                buttons=buttons,
                x=1.2,
                y=0.7
            ),
        ],
    )
    

    Dlaczego przygotowany wykres jest lepszy od oryginalnego?

  • Przygotowany wykres jest lepszy, bo jest interaktywny i daje możliwość odczytywania dokładnych danych, którym odpowiada każda część kolumny w roku(należy najechać kursorem na wybraną kolumnę). Oraz daje możliwość powiększenia dowolnego obszaru wykresu (prawie niewidoczne lata 2007-2011 stają się wtedy widoczne)
  • Została użyta bardziej pasująca paleta kolorów (od jasnego do ciemnego)
  • Zostały dodane jeszcze przyciski po prawej stronie od wykresu. Na wypadek jeżeli użytkownik będzie chciał zobaczyć na wykresie tylko gry, które są w jednym przedziale dochodów.(Tak naprawdę te przyciski nie są bardzo potrzebne, bo ich funkcjonał już wykona legenda w interaktywnym wykresie(przez podwójne kliknięcie), ale zrobiłam z punktu widzenia ćwiczeń ). Jeżeli uznać przyciski za niepotrzebne, to wystarczy dla poprawy wykresu poniżej:
  • In [3]:
    fig1 = go.Figure()
    colors = ['#f5deb3', '#FFD700', 'orange', '#FF5F1F', '#DC143C', '#4A0404']
    
    for i, earnings in enumerate(games_data['Earnings'].unique()):
        earnings_data = games_data[games_data['Earnings'] == earnings]
        fig1.add_trace(go.Bar(
            x=earnings_data['Year'],
            y=earnings_data['NumberOfGames'],
            name=earnings,
            marker_color=colors[i % len(colors)],
            marker_line_color='black', 
            marker_line_width=1,
        ))
    
    fig1.update_layout(
        title="Sales of steam games in first two weeks after launch",
        xaxis=dict(title='Year', dtick=1),
        yaxis=dict(title='Number of games'),
        barmode='stack',
        height=700,
        bargroupgap=0,
        plot_bgcolor='rgba(0,0,0,0)', 
        xaxis_showgrid=True, 
        yaxis_showgrid=True, 
        yaxis_gridcolor='lightgrey',
    ) 
    
    In [4]:
    fig1.write_html("wykres_bez_przyciskow.html")
    fig.write_html("wykres_z_przyciskami.html")